<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" template="/layout/normal.xhtml"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:s="http://jboss.com/products/seam/taglib">

	<ui:define name="body">
		<a name="errores" />
		<h:panelGrid columns="1" id="mensaje">
			<h:messages id="mesage1" styleClass="mensaje_bienvenida">
				<a4j:support event="onchange" action="location.hash='#errores'"></a4j:support>
			</h:messages>
		</h:panelGrid>
		<h:panelGrid columns="1" styleClass="contenedor_pest">
			<rich:tabPanel styleClass="pestanya">
				<rich:tab label="Nuevo equipo" styleClass="no_border">
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText value="DATOS DEL EQUIPO" styleClass="th200_titulo" />
					</h:panelGrid>
					<rich:spacer height="3px;"></rich:spacer>
					<rich:separator styleClass="separadorTres"></rich:separator>
					<rich:spacer height="10px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText
							value="El nombre del equipo es el único campo obligatorio para el alta de un nuevo equipo."
							styleClass="thDescripcion_peq700" />
					</h:panelGrid>
					<rich:spacer height="5px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:panelGrid columns="5">
							<h:outputText value="Nombre" styleClass="th80" />
							<h:inputText value="#{equipoAction.newEquipo.nombre}"
								styleClass="input150" />
							<rich:spacer width="25px;" />
							<h:outputText value="Fundación" styleClass="th80" />
							<h:selectOneMenu value="#{equipoAction.newEquipo.fundacion}"
								styleClass="input75" id="fundacin">
								<s:selectItems var="tipo" value="#{equipoAction.listaAnios}"
									label="#{tipo.anio}" noSelectionLabel=""></s:selectItems>
								<s:convertEntity />
							</h:selectOneMenu>
						</h:panelGrid>
					</h:panelGrid>
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText value="ESCUDO" styleClass="th200_titulo" />
					</h:panelGrid>
					<rich:spacer height="3px;"></rich:spacer>
					<rich:separator styleClass="separadorTres"></rich:separator>
					<rich:spacer height="10px;"></rich:spacer>
					<h:panelGrid columns="5">
						<h:panelGrid columns="1" cellspacing="5px;" id="photoPanel">
							<rich:fileUpload id="upload" listHeight="160px;"
								listWidth="300px;" allowFlash="true"
								fileUploadListener="#{equipoAction.obtenerFotografia()}"
								maxFilesQuantity="1" acceptedTypes="jpg,jpeg,gif,png,bmp"
								immediateUpload="false" addControlLabel="Seleccionar"
								clearAllControlLabel="Limpiar todo" clearControlLabel="Limpiar"
								stopEntryControlLabel="Stop" uploadControlLabel="Subir foto"
								doneLabel="Finalizado" progressLabel="subiendo..."
								transferErrorLabel="Error al subir"
								sizeErrorLabel="Tamaño max. excedido">
								<a4j:support event="onuploadcomplete"
									reRender="photo, photoPanel, mensaje, nophoto"></a4j:support>
							</rich:fileUpload>
							<h:outputText value="Pulse seleccionar para cargar un escudo"
								styleClass="th250_info"
								rendered="#{equipoAction.newEquipo.foto == null}" />
						</h:panelGrid>
						<h:panelGrid columns="2" id="nophoto">
							<rich:spacer width="15px;"
								rendered="#{equipoAction.newEquipo.foto == null}"></rich:spacer>
							<h:graphicImage rendered="#{equipoAction.newEquipo.foto == null}"
								url="/temas/tiki/imagenes/otros/noFotoEscudo.png" width="120px;"
								height="206px;" />
						</h:panelGrid>
						<h:panelGrid columns="2" id="photo">
							<rich:spacer width="15px;"
								rendered="#{equipoAction.newEquipo.foto !=null}" />
							<h:panelGrid columns="1">
								<s:graphicImage value="#{equipoAction.newEquipo.foto}"
									width="120px" height="206px"
									rendered="#{equipoAction.newEquipo.foto != null}"></s:graphicImage>
								<a4j:commandButton action="#{equipoAction.deletePhoto}" value=""
									styleClass="boton_modal eliminar" style="width:120px;"
									rendered="#{equipoAction.newEquipo.foto !=null}"
									reRender="photoPanel, photo, mensaje, nophoto"
									title="pulsa para eliminar el escudo y poder cargar un nuevo" />
							</h:panelGrid>
						</h:panelGrid>
						<rich:spacer width="15px;"></rich:spacer>
						<h:panelGrid columns="1" width="200px;">
							<h:outputText
								value="Sube aquí el escudo identificativo del equipo a dar de alta. Recuerda que sólo podrá subir un escudo,
								 aunque siempre podrá cambiar este cuando lo desee."
								styleClass="thDescripcion_peq200" />
						</h:panelGrid>
					</h:panelGrid>
				</rich:tab>
			</rich:tabPanel>
			<rich:spacer height="10px;"></rich:spacer>

		</h:panelGrid>

	</ui:define>
	<ui:define name="botonera">
		<h:panelGrid columns="7" styleClass="tabla_botonera">
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera ayuda" id="linkAyuda"
					style="width:48px;"
					title="pulsa para obtener ayuda acerca de la pantalla">
					<rich:componentControl for="panelAyuda" attachTo="linkAyuda"
						operation="show" event="onclick"></rich:componentControl>
				</a4j:commandButton>
				<h:outputText value="Ayuda" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera guardar"
					id="linkGuardar" style="width:48px;"
					title="pulsa para guardar los datos del nuevo equipo">
					<rich:componentControl for="panelGuardar" attachTo="linkGuardar"
						operation="show" event="onclick"></rich:componentControl>
				</a4j:commandButton>
				<h:outputText value="Guardar" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera volver"
					style="width:48px;" action="gotoMenuEquipos"
					title="pulsa para volver al menú equipos de la aplicación">
				</a4j:commandButton>
				<h:outputText value="Volver" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera inicio"
					style="width:48px;" action="gotoMenu"
					title="pulsa para volver al menú principal de la aplicación">
				</a4j:commandButton>
				<h:outputText value="Inicio" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
		</h:panelGrid>

		<rich:modalPanel id="panelAyuda" minWidth="400" minHeight="200"
			autosized="false" resizeable="false">

			<rich:spacer height="5px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="160px;"></rich:spacer>
				<h:outputText value="Ayuda" styleClass="thTitulo" />
			</h:panelGrid>
			<rich:spacer height="10px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="25px;"></rich:spacer>
				<h:outputText
					value="Está en la pantalla de alta de nuevo equipo. Para dar de alta un nuevo equipo sólo es obligatorio un nombre.  
									Para almacenar los datos pulse el botón guardar de la botonera inferior."
					style="width:325px;" styleClass="thModalPanel" />
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="325px;"></rich:spacer>
				<h:panelGrid columns="1">
					<h:commandButton id="Aceptar" styleClass="boton_crr cerrar">
						<rich:componentControl for="panelAyuda" attachTo="Aceptar"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
		</rich:modalPanel>

		<rich:modalPanel id="panelGuardar" minWidth="400" minHeight="200"
			autosized="false" resizeable="false">

			<rich:spacer height="5px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="160px;"></rich:spacer>
				<h:outputText value="Guardar" styleClass="thTitulo" />
			</h:panelGrid>
			<rich:spacer height="10px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="25px;"></rich:spacer>
				<h:outputText
					value="Se dispone a guardar los datos en el sistema. 
					¿Desea guardar los datos modificados del formulario?"
					style="width:325px;" styleClass="thModalPanel" />
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="90px;"></rich:spacer>
				<h:panelGrid columns="3">
					<h:commandButton id="aceptarG" action="#{equipoAction.guardar()}"
						value="" styleClass="boton_modal aceptar">
						<rich:componentControl for="panelGuardar" attachTo="aceptarG"
							operation="hide" event="onclick" />
					</h:commandButton>
					<rich:spacer width="15px;"></rich:spacer>
					<h:commandButton id="cancelarG" value=""
						styleClass="boton_modal cancelar">
						<rich:componentControl for="panelGuardar" attachTo="cancelarG"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="325px;"></rich:spacer>
				<h:panelGrid columns="1">
					<h:commandButton id="cerrarG" styleClass="boton_crr cerrar">
						<rich:componentControl for="panelGuardar" attachTo="cerrarG"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
		</rich:modalPanel>

	</ui:define>
</ui:composition>